<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <style>
	*{padding:0;margin:0}
	a{text-decoration:none;color:#fff}
	ul,li{list-style:none}
	body{background:#333;font-size:12px;font-family:"微软雅黑"}
	.tab{width:780px;height:360px;background:#fff;margin:100px auto;border:1px solid red;}
	.tab .header{}
	.tab .header ul{height:40px;background:green;line-height:40px;border-bottom:1px solid red}
	.tab .header li{float:left;}
	.tab .header li a:hover{background:#fff;color:#111;height:41px;}
	.tab .header li a.selected{
		border-right:1px solid red;
		border-left:1px solid red;
		background:#fff;
		color:#333;
		height:41px
	}
	.tab .header li a:first-child.selected{border-left:none;}
	.tab .header li a{display:block;padding:0 20px;border-right:1px solid #fff;}
	.tab .tabcnt{padding:10px;display:none;}

  </style>
 </head>
 <body>
	

	<!--选项卡-->
	<div class="tab">
		<div class="header">
			<ul>
				<li><a class="selected" href="#">男装</a></li>
				<li><a href="#">女装</a></li>
				<li><a  href="#">鞋靴</a></li>
				<li><a href="#">箱包</a></li>
				<li><a href="#">内衣配饰</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="tabcnt" style="display:block">
				男装
			</div>
			<div class="tabcnt">
				女装
			</div>
			<div class="tabcnt">
				鞋靴
			</div>
			<div class="tabcnt">
				箱包
			</div>
			<div class="tabcnt">
				内衣配饰
			</div>
		</div>
	</div>
	


	<!--选项卡-->
	<div class="tab">
		<div class="header">
			<ul>
				<li><a class="selected" href="#">男装</a></li>
				<li><a href="#">女装</a></li>
				<li><a  href="#">鞋靴</a></li>
				<li><a href="#">箱包</a></li>
				<li><a href="#">内衣配饰</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="tabcnt" style="display:block">
				男装
			</div>
			<div class="tabcnt">
				女装
			</div>
			<div class="tabcnt">
				鞋靴
			</div>
			<div class="tabcnt">
				箱包
			</div>
			<div class="tabcnt">
				内衣配饰
			</div>
		</div>
	</div>


	<!--选项卡-->
	<div class="tab">
		<div class="header">
			<ul>
				<li><a class="selected" href="#">男装</a></li>
				<li><a href="#">女装</a></li>
				<li><a  href="#">鞋靴</a></li>
				<li><a href="#">箱包</a></li>
				<li><a href="#">内衣配饰</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="tabcnt" style="display:block">
				男装
			</div>
			<div class="tabcnt">
				女装
			</div>
			<div class="tabcnt">
				鞋靴
			</div>
			<div class="tabcnt">
				箱包
			</div>
			<div class="tabcnt">
				内衣配饰
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$(function(){
			$(".header").find("li").hover(function(){
				var index = $(this).index();
				$(this).find("a").css({
					borderRight:"1px solid red",
					borderLeft:"1px solid red",
					background:"#fff",
					color:"#333",
					height:41
				}).parent().siblings().find("a").css({
					borderRight:"1px solid #fff",
					borderLeft:"none",
					background:"none",
					color:"#fff",
					height:40
				});

				if(index==0){
					$(this).find("a").css({borderLeft:"none"});
				}

				$(this).parents(".tab").find(".content").find(".tabcnt").eq(index).show()
				.siblings().hide();
			});
		})


	</script>

 </body>
</html>
